<template>
    <div class="commonTable">
        <el-table :data="tableData"  v-loading="config.loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection"></el-table-column>
            <el-table-column show-overflow-tooltip
                v-for="item in tableLabel" :key="item.prop" :label="item.label" :width="item.width ? item.width : ''">
                <template slot-scope="scope" >
                    <span v-if="!item.type">{{scope.row[item.prop]}}</span>
                    <span v-if="item.type === 'tag'">
                        <el-tag v-if="scope.row[item.prop] === '男'"><i class="el-icon-male"></i></el-tag>
                        <el-tag v-else type="danger"><i class="el-icon-female"></i></el-tag>
                    </span>
                    <span v-if="item.type === 'textTag'">
                        <el-tag type="success">{{scope.row[item.prop]}}</el-tag>
                    </span>
                    <span v-if="item.type === 'switch'">
                        <el-switch @change="changeStatus(scope.row)" v-model="scope.row[item.prop]" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                    </span>
                    <span v-if="item.type === 'image'">
                        <img :src="scope.row[item.prop]" alt="未提交图片" style="height:100px;">
                    </span>
                    <span v-if="item.type === 'headImg'">
                        <el-avatar :size="80">
                            <img :src="scope.row[item.prop]" alt="" style="height:100px;">
                        </el-avatar>
                    </span>
                </template>
            </el-table-column>

            <el-table-column label="操作" v-if="config.btn.length > 0">
                <template slot-scope="scope" >
                    <el-button v-show="config.btn[0].type === 'detail'" type="text" icon="el-icon-view" size="mini" @click="handledetail(scope.row)">详细</el-button>
                    <el-button v-show="config.btn[1].type === 'edit'" type="text" icon="el-icon-edit" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button v-show="config.btn[2].type === 'delete'" type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            v-show="tableData.length > 0"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="config.current"
            :page-sizes="[5, 10, 30]"
            :page-size="config.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="config.total">
        </el-pagination>
    </div>
</template>

<script>
export default {
  props: {
    tableData: Array,
    tableLabel: Array,
    config: Object // 配置对象
  },
  data () {
    return {
      data: [
        [{ a: 1 }, { b: 2 }, { c: 3 }],
        [{ d: 11 }, { e: 21 }, { f: 31 }],
        [{ g: 111 }, { h: 211 }, { i: 311 }]
      ]
    }
  },
  methods: {
    handleEdit (row) {
      this.$emit('edit', row)
    },
    handleDelete (row) {
      this.$emit('del', row)
    },
    handledetail (row) {
      this.$emit('detail', row)
    },
    handleSizeChange (val) {
    //   console.log(`每页 ${val} 条`)
      this.$emit('changeSize', val)
    },
    handleCurrentChange (val) {
    //   console.log(`当前页: ${val}`)
      this.$emit('changeCurrent', val)
    },
    // 状态改变
    changeStatus (row) {
      this.$emit('changeStatus', row)
    },
    handleSelectionChange (val) {
      // console.log(val)
      this.$emit('changeSelect', val)
    }
  }

}
</script>

<style lang="scss" scoped>
.commonTable{
    margin-top: 10px;
    .el-pagination{
        height: 200px;
        padding: 30px 0px 0px 10px;

    }
    .el-avatar{
        // border: 1px solid rgb(78, 77, 77);
        background-color: rgb(252, 251, 249);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        padding: 8px;
        position: relative;
        img{
            border-radius: 50%;
            // width: 100%;
            // height: inherit;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
            background-color: #fff;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
       }
    }
}
</style>
